<?php
use yii\widgets\ActiveForm;
use yii\helpers\Html;
use doumiaoduo\layer\LayerAsset;
use doumiaoduo\layer\LayerIframeWidget;
use common\components\helpers\Fun;
LayerAsset::register($this);
LayerIframeWidget::widget();
?>
    <div class="yx-praise-box zx-min-height">
        <div class="yx-bgf9f9f9">
            <ul class="yx-step">
                <li class="active" data-step="1">
                    <div class="yx-ring yx-radius50 active"><span class="yx-per-step yx-radius50 active">1</span></div>
                    <h4>选择机构</h4>
                </li>
                <li data-step="2">
                    <div class="yx-ring yx-radius50"><span class="yx-per-step yx-radius50">2</span></div>
                    <h4>选择课件</h4>
                </li>
                <li data-step="3">
                    <div class="yx-ring yx-radius50"><span class="yx-per-step yx-radius50">3</span></div>
                    <h4>选择老师</h4>
                </li>
                <li data-step="4">
                    <div class="yx-ring yx-radius50"><span class="yx-per-step yx-radius50">4</span></div>
                    <h4>选择教室</h4>
                </li>
                <li data-step="5">
                    <div class="yx-ring yx-radius50"><span class="yx-per-step yx-radius50">5</span></div>
                    <h4>上课时间</h4>
                </li>
                <li data-step="6">
                    <div class="yx-ring yx-radius50"><span class="yx-per-step yx-radius50">6</span></div>
                    <h4>课程详情</h4>
                </li>
                <li data-step="7">
                    <div class="yx-ring yx-radius50"><span class="yx-per-step yx-radius50">7</span></div>
                    <h4>完成</h4>
                </li>
            </ul>
        </div>
        <div id='get-url' data-url="<?=\yii\helpers\Url::to()?>" class="yx-praise-list-box yx-praise-list-box1">
            <div class="arrangement-step" id="step1">
                <div class="yx-step-title">
                    <h3 class="yx-floatl"><span>1</span>请选择机构</h3>
                    <div class="yx-floatr search_box">
                        <input type="text" class="yx-floatl search yx-width200 zx-lh24 yx-ml6" name="search" placeholder="输入机构名字搜索"><input type="button" class="yx-search" value="搜索" id="search_btn">
                    </div>
                    <div class="yx-clear"></div>
                </div>

                <?php if(!empty($mechanicList)) { ?>
                    <ul class="pub nav nav-tabs yx-nav-tabs1 yx-nav-tabs2" id="mechanicList">
                        <?php foreach($mechanicList as $k=>$v) { ?>
                        <li class="yx-arrangement-tab <?php if(!empty($model->mechanic_id) && $model->mechanic_id==$v->id){ echo 'active';}?>" data-mechanic_id="<?=$v->id?>">
                            <a data-toggle="tab" <?php if(!empty($model->mechanic_id) && $model->mechanic_id==$v->id){ echo 'class="zx-click-bg"';}?>" ><?=!empty($v->name)?$v->name:'暂无'?></a>
                        </li>
                        <?php }?>
                    </ul>
                <?php }?>
                        <div class="yx-clear"></div>
                        <div class="zx-button-center">
                            <button type="button" id="button_step_1" data-step="1" class="btn yx-next-step yx-radius5 button_step">下一步</button>
                            <a href="<?=Fun::url(['arrangement/index'])?>"><button type="button" class="btn zx-back-step yx-radius5 button_step">返回</button></a>
                        </div>
                    </div>

            <div class="arrangement-step" id="step2" style="display: none">
                <div class="yx-step-title">
                    <h3><span>2</span>请选择课件</h3>
                </div>
                <div class="yx-clear"></div>
                <div class="zx-button-center">
                    <button id="button_step_2" data-step="2" type="button" class="btn yx-next-step yx-radius5 button_step">下一步</button>
                    <button id="button_back_2" data-step="2" type="button" class="btn zx-back-step yx-radius5 button_step">上一步</button>
                </div>
            </div>

            <div class="arrangement-step" id="step3" style="display:none;">
                <div class="yx-step-title">
                    <h3><span>3</span>请选择老师</h3>
                </div>
                <table id="teacher" class="table yx-table1 yx-table5 table-striped with-check">
                    <thead>
                    <tr class="yx-bgdff3fe">
                        <th class="yx-bl" scope="checkbox"></th>
                        <th scope="name">老师名称</th>
                        <th scope="sex">性别</th>
                        <th scope="age" class="yx-br">年龄</th>
                    </tr>
                    </thead>
                </table>

                 <div class="yx-clear"></div>
                <div class="zx-button-center">
                    <button type="button" id="button_step_3" data-step="3" class="btn yx-next-step yx-radius5 button_step">下一步</button>
                    <button type="button" id="button_back_3" data-step="3" class="btn zx-back-step yx-radius5 button_step">上一步</button>
                </div>


            </div>

            <div class="arrangement-step" id="step4" style="display: none">
                <div class="yx-step-title">
                    <h3><span>3</span>请选择教室</h3>
                </div>
                <table id="classroom" class="table yx-table1 yx-table5 table-striped with-check">
                    <thead>
                    <tr class="yx-bgdff3fe">
                        <th class="yx-bl" scope="radio"></th>
                        <th scope="name">教室名称</th>
                        <th scope="room_number">教室编码</th>
                        <th scope="max_count">最大人数</th>
                    </tr>
                    </thead>
                </table>
                <div class="zx-button-center">
                    <button id="button_step_4" data-step="4" type="button" class="btn yx-next-step yx-radius5 button_step">下一步</button>
                    <button id="button_back_4" data-step="4" type="button" class="btn zx-back-step yx-radius5 button_step">上一步</button>
                </div>
            </div>
            <div class="arrangement-step" id="step5" style="display: none">
                <div class="yx-step-title">
                    <h3><span>4</span>请选上课时间</h3>
                </div>
                <table id="classroom_time" class="table yx-table1 yx-table5 table-striped with-check">
                    <thead>
                    <tr class="yx-bgdff3fe">
                        <th class="yx-bl" scope="checkbox"></th>
                        <th scope="classday">上课星期</th>
                        <th scope="start_time">上课时间</th>
                        <th scope="end_time" class="yx-br">下课时间</th>
                        <th scope="count" class="yx-br">占用次数</th>
                    </tr>
                    </thead>
                </table>
                <div class="zx-button-center">
                    <button id="button_step_5" data-step="5" type="button" class="btn yx-next-step yx-radius5 button_step">下一步</button>
                    <button id="button_back_5" data-step="5" type="button" class="btn zx-back-step yx-radius5 button_step">上一步</button>
                </div>
            </div>
            <div class="arrangement-step" id="step6" style="display: none">
                <div class="yx-step-title">
                    <h3><span>5</span>请填写课程详情</h3>
                </div>
                <?php $form = ActiveForm::begin(['enableClientValidation' => false, 'enableAjaxValidation' => true, 'options' => ['class' => 'form-validate']]); ?>
                <table width="100%" class="table-form">
                    <tr>
                        <th class="zx-goods-table"><?= $model->attributeLabels()['tutor_id']; ?></th>
                        <td style="display: inline-block;"><?= $form->field($model, 'tutor_id', ['template' => '{input}{error}{hint}'])->widget(\kartik\select2\Select2::className(),['data'=>$tutor,'options' => ['placeholder' => '请选择导师']]) ?></td>
                    </tr>
                    <tr>
                        <th class="zx-goods-table"><?= $model->attributeLabels()['max_number']; ?></th>
                        <td><?= $form->field($model, 'max_number', ['template' => '{input}{error}{hint}'])->textInput(['class' => 'input-text']) ?></td>
                    </tr>
                    <tr>
                        <th class="zx-goods-table"><?= $model->attributeLabels()['opening_number']; ?></th>
                        <td><?= $form->field($model, 'opening_number', ['template' => '{input}{error}{hint}'])->textInput(['class' => 'input-text']) ?></td>
                    </tr>
                    <tr>
                        <th class="zx-goods-table"><?= $model->attributeLabels()['suitable_age']; ?></th>
                        <?php
                        $ages = range(3,60);
                        $arr = [];
                        foreach($ages as $v){
                            $arr[$v] = $v.'岁';
                        }
                        ?>
                        <td style='display: inline-block'><?= $form->field($model, 'min_age', ['template' => '{input}{error}{hint}'])->widget(\kartik\select2\Select2::className(),['data'=>$arr,'options' => ['placeholder' => '最小年龄']]) ?></td>
                        <td style='display: inline-block'><?= $form->field($model, 'max_age', ['template' => '{input}{error}{hint}'])->widget(\kartik\select2\Select2::className(),['data'=>$arr,'options' => ['placeholder' => '最大年龄']]) ?></td>

                    </tr>
                    <tr>
                        <th class="zx-goods-table"><?= $model->attributeLabels()['is_booking']; ?></th>
                        <td><?= $form->field($model, 'is_booking', ['template' => '{input}{error}{hint}'])->checkbox([], ['style','padding-top:5px;']) ?></td>
                    </tr>
                    <tr  style="display: none">
                        <th class="zx-goods-table"><?= $model->attributeLabels()['teacher_id']; ?></th>
                        <td><?= $form->field($model, 'teacher_id', ['template' => '{input}{error}'])->textInput(); ?></td>
                    </tr>
                    <tr  style="display: none">
                        <th class="zx-goods-table"><?= $model->attributeLabels()['course_id']; ?></th>
                        <td><?= $form->field($model, 'course_id', ['template' => '{input}{error}'])->textInput(); ?></td>
                    </tr>
                    <tr  style="display: none">
                        <th class="zx-goods-table"><?= $model->attributeLabels()['classroom_id']; ?></th>
                        <td><?= $form->field($model, 'classroom_id', ['template' => '{input}{error}'])->textInput(); ?></td>
                    </tr>
                    <tr style="display: none">
                        <th class="zx-goods-table"><?= $model->attributeLabels()['classroom_attr_id']; ?></th>
                        <td><?= $form->field($model, 'classroom_attr_id', ['template' => '{input}{error}'])->textInput(); ?></td>
                    </tr>
                    <tr style="display: none">
                        <th class="zx-goods-table"><?= $model->attributeLabels()['mechanic_id']; ?></th>
                        <td><?= $form->field($model, 'mechanic_id', ['template' => '{input}{error}'])->textInput(); ?></td>
                    </tr>
                    <tr style="display: none">
                        <th class="zx-goods-table"><?= $model->attributeLabels()['room_type']; ?></th>
                        <td><?= $form->field($model, 'room_type', ['template' => '{input}{error}'])->textInput(); ?></td>
                    </tr>
                </table>
                <div class="zx-button-center">
                    <?= Html::submitButton('提交', ['class' => "btn yx-next-step yx-radius5 button_step", 'id' => 'arrangecourse-button']) ?>
                    <button id="button_back_5" data-step="5" type="button" class="btn zx-back-step yx-radius5 button_step">上一步</button>
                </div>
                <?php ActiveForm::end(); ?>
            </div>
        </div>
    </div>
    <?=Html::hiddenInput('mode',Fun::getSiteMode(Fun::getSiteId()),['id'=>'mode']);?>
    <?php
    $js=<<<JS
    //弹出层样式加载
    layer.config({
        extend: ['skin/customskin/style.css']//加载您的扩展样式
    });

     var url =$('#get-url').data('url'),
     teacher_id=$('#arrangement-teacher_id').val(),
     course_id=$('#arrangement-course_id').val(),
     classroom_id=$('#arrangement-classroom_id').val(),
     classroom_time_id=$('#arrangement-classroom_attr_id').val(),
     mechanic_id=$('#arrangement-mechanic_id').val();
     room_type=$('#arrangement-room_type').val();
     $('#button_step_1').val(mechanic_id);
     $('#button_step_3').val(teacher_id);
     $('#button_step_2').val(course_id);
     //上一步按钮
     $('button[id^="button_back_"]').click(function(){
        var  step = $(this).data('step');
        var back_step=$(this).data('step')-1;
        $('#button_step_'+step).val('');
       _showStep(back_step);
    });
     //选中机构信息
    $(document).on('click','#mechanicList li',function(){
        $(this).siblings().find('a').removeClass('zx-click-bg').end().end().find('a').addClass('zx-click-bg');
        //layer.msg("选择成功！",{id:'layer-msg',skin: 'layui-msg-customskin',time: 1000});
        var mechanic_id=$(this).data('mechanic_id');
        //layer.msg("选择成功！",{id:'layer-msg',skin: 'layui-msg-customskin',time: 1000});
        $('#button_step_1').val(mechanic_id);
    });
    //点击机构下一步
    $('#button_step_1').click(function(){
         mechanic_id=$(this).val();
        var step1=$(this).data('step')+1;
        if(mechanic_id !=''){
           
            $.ajax({
             url:url,
             type:'post',
             data:{mechanic_id:mechanic_id,ajax:'course_list',_csrf:yii.getCsrfToken()},
             dataType:'json',
             beforeSend:function(){
                layer.load(0, { shade: [0.5, '#393D49'] });
             },
             complete:function(){
              layer.close(layer.load(0, { shade: [0.5, '#393D49'] }));  
            },
            success:function(data){
                 $("#step2 ul").empty().remove();
                 if(data.length>0){
                    var ul=$('<ul>').addClass("pub nav nav-tabs yx-nav-tabs1 yx-nav-tabs2").attr('id','myTab');
                    for(var i=0;i<data.length;i++){
                        if(course_id!='' && data[i]['id']==course_id){
                             $('<li>').addClass('yx-arrangement-tab').html("<a data-toggle='tab' class='zx-click-bg'>"+data[i]['name']+'-'+data[i]['teache_form']+"</a>").data('course_id',+data[i]['id']).appendTo(ul);
                        }else{
                             $('<li>').addClass('yx-arrangement-tab').html("<a data-toggle='tab'>"+data[i]['name']+'-'+data[i]['teache_form']+"</a>").data('course_id',+data[i]['id']).appendTo(ul);
                        }
                    }
                    $('#step2 .yx-step-title').after(ul);
                } 
               _showStep(step1);
            }
         });
        }else{
            layer.msg("请先选择机构！",{id:'layer-msg',skin: 'layui-msg-customskin',time: 1000});
            return false;
        }

    }); 

    // //选中教师信息
    // $(document).on('click','#step2 .teacher_name',function(){
    //     $(this).siblings().removeClass('zx-click-bg').end().addClass('zx-click-bg');
    //     //layer.msg("选择成功！",{id:'layer-msg',skin: 'layui-msg-customskin',time: 1000});
    //     $('#button_step_1').val($(this).data('teacher_id'));
    // });
    
     //选中课程信息
    $('#step2').on('click','#myTab li',function(){
        $(this).siblings().find('a').removeClass('zx-click-bg').end().end().find('a').addClass('zx-click-bg');
        //layer.msg("选择成功！",{id:'layer-msg',skin: 'layui-msg-customskin',time: 1000});
        course_id=$(this).data('course_id');
        $('#button_step_2').val($(this).data('course_id'));
    });
    
    
    //点击课程信息的下一步
    $('#button_step_2').click(function(){
        course_id=$(this).val();
        var step1=$(this).data('step')+1;
        if(course_id!=''){
           
            $.ajax({
             url:url,
             type:'post',
             data:{course_id:course_id,ajax:'th',_csrf:yii.getCsrfToken()},
             dataType:'json',
             beforeSend:function(){
                layer.load(0, { shade: [0.5, '#393D49'] });
             },
             complete:function(){
              layer.close(layer.load(0, { shade: [0.5, '#393D49'] }));  
            },
            success:function(data){
                 _getTeacher('teacher',data['teacher']);
               _getClassroom('classroom',data['classroom']);
               _getRoomGroup('classroom',data['roomGroup']);
               _showStep(step1);
            }
         });
        }else{
            layer.msg("请先选择课程！",{id:'layer-msg',skin: 'layui-msg-customskin',time: 1000});
            return false;
        }

    });

   
    //点击老师信息的下一步
    $('#button_step_3').click(function(){
          teacher_id = '';
         var step4=$(this).data('step')+1;
         $('#teacher').find("input:checked").each(function(){
            teacher_id+=teacher_id.length==0?$(this).val():','+$(this).val();
         });
         if(teacher_id==''){
             layer.msg("请先选择老师！",{id:'layer-msg',skin: 'layui-msg-customskin',time: 1000});
         }else{
            _showStep(step4);
         }
    });

    //点击教室信息的下一步
    $('#button_step_4').click(function(){
        classroom_id=$("#classroom input:checked").val();
        room_type=$("#classroom input:checked").data('type');
        var step5=$(this).data('step')+1;
        if(classroom_id=='on'||classroom_id=='undefined'||classroom_id==''){
             layer.msg("请先选择教室！",{id:'layer-msg',skin: 'layui-msg-customskin',time: 1000});
             return false;
        }else{
             $.ajax({
             url:url,
             type:'post',
             data:{classroom_id: classroom_id,course_id:course_id,room_type:room_type,ajax:'cc',_csrf:yii.getCsrfToken()},
             dataType:'json',
             beforeSend:function(){
                layer.load(0, { shade: [0.5, '#393D49'] });
             },
             complete:function(){
              layer.close(layer.load(0, { shade: [0.5, '#393D49'] }));  
            },
            success:function(data){
                 _getClassroom('classroom_time',data.data);
                _showStep(step5);
            }
         });
        }
    });

    //点击上课时间的下一步
    $('#button_step_5').click(function(){
         classroom_time_id='';
         var step6=$(this).data('step')+1;
         $('#classroom_time').find("input:checked").each(function(){
            classroom_time_id+=classroom_time_id.length==0?$(this).val():','+$(this).val();
         });
         if(classroom_time_id==''){
             layer.msg("请先选择上课时间！",{id:'layer-msg',skin: 'layui-msg-customskin',time: 1000});
         }else{
            _showStep(step6);
            $('#arrangement-teacher_id').val(teacher_id);
            $('#arrangement-course_id').val(course_id);
            $('#arrangement-classroom_id').val(classroom_id);
            $('#arrangement-classroom_attr_id').val(classroom_time_id);
            $('#arrangement-mechanic_id').val(mechanic_id);
            $('#arrangement-room_type').val(room_type);
         }
    });
    //验证招生的最大人数
    $('.form-control').on('change',function(){
      var mode = $('#mode').val();
      var is_online = $('input[name="Arrangement[is_online]"]:checked').val();
      if(mode == 'A' && is_online == 1){
          var class_count = $('#arrangement-class_count').val();
          var price = $('#arrangement-price').val();
          if(course_id == '' || class_count == '' || price == ''){
             return false;
           }
          $.post(url, {course_id: course_id,class_count:class_count,price:price,ajax:'max',_csrf:yii.getCsrfToken()}, function (data) {
              var tishi = $('#tishi').html();
              if(data.mode == 'A'){
                if( typeof tishi != 'undefined'){
                   $('#tishi').html('此机构一共可预约'+data.total_number+'剩余人数 '+data.num);
                }else{
                   $('.field-arrangement-max_number').append('<div style="float:left" id="tishi">此机构一共可预约'+data.total_number+'剩余'+data.num+'</div>');
                }

              }
            }, "json");
        }
    });
   $('input[name="Arrangement[is_online]"]').on('click',function(){
    var is_online = $(this).val();
    if(is_online == 0 ){
       $('#newclass').hide();
       $('#oldclass').show();
       $('#tishi').hide();
       var str = $('.field-arrangement-max_number').find('.help-block').html();
       if(str = '人数过多'){
          $('.field-arrangement-max_number').find('.help-block').html('')
        }
    }else{
      $('#newclass').show();
      $('#oldclass').hide();
      $('#tishi').show();
    }

});

  //验证每天的上课次数
  $('#arrangecourse-button').click(function(){
       var class_count = $('#arrangement-class_count').val();
       var ids = $('#arrangement-classroom_attr_id').val();
       var is_line = $('input[name="Arrangement[is_online]"]:checked ').val();
       if(class_count.length != 0 && ids.length != 0 && is_line == 1){
        $.post(url, {class_count: class_count,ids:ids,ajax:'classCount',_csrf:yii.getCsrfToken()}, function (data) {
            if(data.data.length>0){
                 layer.msg(data.data,{id:'layer-msg',skin: 'layui-msg-customskin',time: 1000}); return false;
            }
           }, "json");
       }
  });

    //获取课程信息
    function _getCourse(data){
        $("#step2 ul").empty().remove();
        if(data.length>0){
            var ul=$('<ul>').addClass("pub nav nav-tabs yx-nav-tabs2").attr('id','myTab');
            for(var i=0;i<data.length;i++){
                if(course_id!='' && data[i]['id']==course_id){
                     $('<li>').addClass('yx-arrangement-tab').html("<a data-toggle='tab' class='zx-click-bg'>"+data[i]['name']+"</a>").data('course_id',+data[i]['id']).appendTo(ul);
                }else{
                     $('<li>').addClass('yx-arrangement-tab').html("<a data-toggle='tab'>"+data[i]['name']+"</a>").data('course_id',+data[i]['id']).appendTo(ul);
                }
            }
            $('#step2 .yx-step-title').after(ul);
        }
    }
    //获取对应表格信息
    function _getClassroom(table_id,data){
        var _this= $("#"+table_id);
        _this.find("tbody").empty().remove();
        _this.find('thead').after("<tbody></tbody>");
        var tbody =$("#"+table_id+" tbody"), props = [];
        $.each($("#"+table_id+" th"), function(i, prop){
             props[i]=$(this).attr('scope');
        });
        $.each(data, function(i, value){
            var tr = $('<tr>');
            $.each(props, function(j, prop){
                if(prop=='radio'){
                    if(classroom_id!='' && value["id"]==classroom_id && room_type == 0){
                        $('<td>').html('<input type="radio" value='+value["id"]+' name="radio" data-type=0  checked="checked"/>').appendTo(tr);
                    }else{
                        $('<td>').html('<input type="radio" value='+value["id"]+' name="radio" data-type=0 />').appendTo(tr);
                    }
                }else if(prop=='checkbox'){  
                        var classroom_time_arr=classroom_time_id.split(',');
                        console.log(classroom_time_arr);
                        if(classroom_time_arr && $.inArray(value["id"],classroom_time_arr)!=-1){
                            $('<td>').html('<input  value='+value["id"]+' type="checkbox" checked="checked"/>').appendTo(tr);
                        }else{
                            $('<td>').html('<input  value='+value["id"]+' type="checkbox"/>').appendTo(tr);
                        }
                    
                }else{
                     $('<td>').html(value[prop]).appendTo(tr);
                }
            });
            tbody.append(tr);
        });
    }
    //获取老师并显示
    function _getTeacher(table_id,data) {
        var _this= $("#"+table_id);
        _this.find("tbody").empty().remove();
        _this.find('thead').after("<tbody></tbody>");
        var tbody =$("#"+table_id+" tbody"), props = [];
        var teacher_arr=teacher_id.split(',');
        console.log(teacher_arr);
        $.each($("#"+table_id+" th"), function(i, prop){
             props[i]=$(this).attr('scope');
        });

         $.each(data, function(i, value){
            var tr = $('<tr>');
            $.each(props, function(j, prop){
                if(prop=='checkbox'){
                    var val = value['id'].toString();
                    if(teacher_arr && $.inArray(val,teacher_arr)!=-1){
                        $('<td>').html('<input  value='+value["id"]+' type="checkbox" checked="checked"/>').appendTo(tr);
                    }else{
                        $('<td>').html('<input  value='+value["id"]+' type="checkbox"/>').appendTo(tr);
                    }
                }else {
                    $('<td>').html(value[prop]).appendTo(tr);
                }
               
            });
            tbody.append(tr);
        });
    }
    
    function _getRoomGroup(table_id,data) {
        var _this= $("#"+table_id);
        var tbody =$("#"+table_id+" tbody");
        for (var i=0;i<data.length;i++){
            var room = data[i].room;
            var str = '<tr>';
                str += '<td>';
                if(classroom_id !='' && data[i].id==classroom_id && room_type == 1){
                  str += '<input type="radio" value='+data[i].id+' name="radio" data-type=1  checked="checked"/>' ;
                }else{
                   str += '<input type="radio" value='+data[i].id+' name="radio" data-type=1 />' ; 
                }
                str += '</td>';
                str += '<td>'+data[i].name+'</td>';
                str += '<td colspan="2">';
                str += '<table class="table yx-table1 yx-table5 table-striped with-check">';
                for (var j=0;j<room.length;j++){
                    str += '<tr>';
                    str += '<td>'+room[j].name+'</td>';
                    str += '<td>'+room[j].room_number+'</td>';
                    str += '</tr>';
                }
                str += '</table>';
                str += '</td>';
                str += '</tr>';
        }
        tbody.append(str);
    }
    
    

    //显示每一步的div
    function _showStep(step){
        $("div[id^='step']").css('display','none');
        $("div[id=step"+step+"]").css('display','block');
        $('.yx-step li').each(function(i){
            if($(this).data('step')==step){
                $(this).addClass('active').find('div').addClass('active').find('span').addClass('active');
            }else{
                $(this).removeClass('active').find('div').removeClass('active').find('span').removeClass('active');
            }
        })
    }
    $(document).on('click','#search_btn',function(){
        var id = $('#button_step_1').val();
        var name = $('input[name="search"]').val();
        $('#button_step_1').val('');
         $.post(url, {name:name,ajax:'search_mechanic',_csrf:yii.getCsrfToken()}, function (data) {
             var str = '';
             for(var i=0;i<data.length;i++){
                 var item = data[i];
                 // if(item.id == id ){
                 //   var classs ='zx-click-bg'; 
                 // }else {
                 //     var classs =''; 
                 // }
                 str += '<li class="yx-arrangement-tab " data-mechanic_id="'+item.id+'">'; 
                 str += '<a data-toggle="tab" class="">'+item.name+'</a>'; 
                 str += '</li>';
             }
             $('#mechanicList').html(str);   
            }, "json");
        
    });
JS;
    $this->registerJS($js);
    ?>
